<template>
  <div class="number-info">
    <div class="top-info">
      <div class="title">
        <span>
          {{winningNumbers.previous.dateNo}}
        </span>
        <span>
          期开奖号码
        </span>
      </div>
      <div class="number-bar">
        <!-- <span>
          {{winningNumbers.previous.context}}
        </span> -->
        <text-bar :content="winningNumbers.previous.context"></text-bar>
      </div>
    </div>
    <div class="bottom-info">
      <div class="numbers">
        <span 
          v-for="(number, index) in winningNumbers.previous.numbers.split(',')" 
          :key="index"
          class="number button-unselected"
          :class="'dd-ball-' + index"
          >
          {{number}}
        </span>
        <span class="number" style="fontSize: 15px;">=</span>
        <span 
          class="number button-unselected"
          :class="'dd-ball-' + sum"
        >{{sum}}</span>
      </div>
    </div>
  </div> 
</template>

<script>
import NumberSelector from '@/components/base/number-selector/number-selector'
import TextBar from '@/components/base/text-bar/text-bar'
export default {
  components: {
    NumberSelector,
    TextBar
  },
  props: {
    winningNumbers: {
      type: Object,
      default: function() {
        return  {
          id: 3,
          lotteryName: '北京28',
          previous: {
            dateNo: '819048',
            numbers: '1,2,3',
            context:'13，大，单',
          }
        }
      }
    }
  },
  data() {
    return {
     
    }
  },
  methods: {
  },
  computed: {
    sum() {
      let numbers = this.winningNumbers.previous.numbers
      let s = 0
      numbers.split(',').forEach(item => {
        s += parseInt(item)
      })
      return s
    }
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl'
    .number-info  
      .top-info 
        display flex
        align-items center
        margin-bottom 12px
        .number-bar 
          margin-left 10px
      .bottom-info
        .numbers 
          display flex
          align-items center
          .number 
            width 36px
            height 36px
            display flex 
            align-items center 
            justify-content center
            border-radius 50%
            margin-right 10px
            box-sizing border-box 
</style>